<template>
	<!-- 住院预交页面:缴费页面 -->
	<view>
		<UserInfoCardVue :change="false"></UserInfoCardVue>
		<view class="pad-16r">
			<view class="card-pay">
				<view class="pat-title">住院人信息</view>
				<view class="pad-10">
					<view class="row">
						<view class="color-gray mar-0-5">住院患者:</view>
						<view>{{userInfo.patName}}</view>
					</view>
					<view class="row">
						<view class="color-gray mar-0-5">住&nbsp;&nbsp;院&nbsp;&nbsp;号:</view>
						<view>{{form.admissionNo}}</view>
					</view>
					<view class="row" v-if="form.campusName">
						<view class="color-gray mar-0-5">住院院区:</view>
						<view>{{form.campusName}}</view>
					</view>
					<view class="row" v-if="form.deptName">
						<view class="color-gray mar-0-5">住院科室:</view>
						<view>{{form.deptName}}</view>
					</view>
					<view class="row" v-if="form.theHospitalWard">
						<view class="color-gray mar-0-5">住院病区:</view>
						<view>{{form.theHospitalWard}}</view>
					</view>
				</view>
			</view>
			<view class="card-pay shenyujine mar-10-0 pad-16r">
				<view class="shenyujine-money">
					<view class="money-title">剩余金额(元)</view>
					<view class="money-currentBalance">{{form.currentBalance}}</view>
				</view>
				<view class="yujiaojine">
					<view class="mar-0-10">预交金额:</view>
					<u-input v-model="form.payMoney" ref="payMoney" class="form-money" type="number"
						:custom-style="customStyle" placeholder="请输入预交金额" />
					<view class="mar-0-10"> 元</view>
				</view>
				<view class="list-pay-money">
					<view v-for="(item,index) in list" class="list-item">
						<view class="item-money" :class="item.active?'active':''" @click="clickMoney(item)">
							￥ {{item.money}}
						</view>
					</view>
				</view>
			</view>
			<ButtonVue content="去支付" @click="checkForm"></ButtonVue>
			<view class="to-record" @click="toPayRecordPage">查看住院缴费记录</view>
		</view>
		<Dialog :show="showPay" @close="showPay=false" @confirm="confirmPay">
			<view class="slot-content">
				<view>
					确定支付押金?
				</view>
			</view>
		</Dialog>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue';
	import ButtonVue from '../../../components/Button/Button.vue';
	import DialogVue from '../../../components/Dialog/Dialog.vue';
	import {
		mapGetters
	} from 'vuex'
	import {
		dictionarySelect
	} from '../../../api/dictionary';
	import {
		inHospitalPreparePayBalance
	} from '../../../api/inHospital';
	export default {
		components: {
			UserInfoCardVue,
			ButtonVue,
			DialogVue,
		},
		computed: {
			...mapGetters(['userInfo', "hostApi"]),
		},
		data() {
			return {
				form: {},
				list: [{
					money: 100,
					active: false
				}, {
					money: 500,
					active: false
				}, {
					money: 1000,
					active: false
				}, {
					money: 5000,
					active: false
				}, {
					money: 10000,
					active: false
				}, {
					money: 20000,
					active: false
				}],
				customStyle: {
					"padding": "0 10px",
					"flex": "1",
					"width": "100%"
				},
				showPay: false
			}
		},
		onLoad(e) {
			this.form = JSON.parse(e.item)
			console.log(this.form)
			this.initYajin();
			this.init()
		},
		methods: {
			initYajin() {
				inHospitalPreparePayBalance({
					patId: this.form.patId,
					iptCount: this.form.iptCount
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.form.currentBalance = res[0].currentBalance
					}
				})
			},
			init() {
				// 住院支付金额设置
				dictionarySelect({
					code: 'InHospitalPayNormalMoney',
					status: 1
				}).then(res => {
					if (res.length > 0) {
						this.list = []
						let lis = res[0].describe.split(',');
						for (var i = 0; i < lis.length; i++) {
							this.list.push({
								money: lis[i],
								active: false
							})
						}

					}
				})
			},
			toPayRecordPage() {
				uni.navigateTo({
					url: '/pages/Home/ServeHospital/InHospitalPaymentRecord?item=' + JSON.stringify(this.form)
				})
			},
			clickMoney(item) {
				console.log(item)
				this.list.forEach(item => {
					item.active = false
				})
				item.active = true
				this.form.payMoney = item.money
			},
			checkForm() {
				if (!this.form.payMoney) {
					this.$refs.uToast.show({
						title: '请输入押金金额',
						type: 'warning',
					})
					return
				}
				this.showPay = true
			},
			confirmPay() {
				// 

			}
		}
	}
</script>

<style scoped>
	.card-pay {
		border-radius: 16px;
		box-shadow: 0 5px 1000px 1rpx #e0e2e7;
		background-color: white;
	}

	.pat-title {
		background-color: #CAF7FA;
		line-height: 50px;
		height: 50px;
		border-radius: 16px 16px 0 0;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 15px;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 0 16rpx;
	}

	.form-money {
		background-color: rgb(255, 255, 255);
		border-radius: 16rpx;

	}

	.shenyujine {
		background-image: url("/static/images/imgs/pay-zhuyuanyujiaoshenyujine.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 310px;
	}

	.shenyujine-money {
		padding: 5px 20px;
		border: 16rpx;

	}

	.yujiaojine {
		display: flex;
		align-items: center;
		margin: 20px 0;
	}

	.list-pay-money {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 18px;
		font-weight: bold;
	}

	.list-item {
		width: 30%;
		margin: 10px 0;

	}

	.item-money {
		padding: 10px 0;
		border: 1px solid rgb(215, 215, 215);
		text-align: center;
		border-radius: 16rpx;
	}

	.active {
		background-color: rgb(255, 244, 241);
		border: 1px solid rgb(252, 105, 42);
	}

	.row {
		display: flex;
		justify-content: flex-start;
		line-height: 30px;
	}

	.money-title {
		/* text-align: center; */
		font-weight: bold;
		font-size: 16px;
	}

	.money-currentBalance {
		/* text-align: center; */
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

	.border-dash {
		border: 1px dashed rgb(215, 215, 215);
	}

	.border-solid {
		border: 1px solid rgb(225, 225, 225);
	}

	.item {
		background-color: rgb(226, 237, 255);
		line-height: 50px;
		text-align: center;
		/* padding: 5px 20px; */
		margin: 10px 20px;
		width: 80px;
	}

	.to-record {
		text-align: center;
		color: rgb(66, 207, 217);
		padding: 5px 10px;
		border-radius: 16rpx;
		font-size: 18px;
	}
</style>